<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 220px;
            height: 320px;
            border: 1px solid black;
            text-align: center;
            border-radius: 10px;
            background-color: 	#DDA0DD;
            margin: 100px auto;
        }
        span{
           
            line-height: 100px;
            
        }
        .box1{
            width: 200px;
            height: 200px;
            margin: auto;
            border: 1px solid black;
            border-radius: 7px;
            background-color: white;
        }
        input{
            margin-bottom: 10px;
        }
        .btn{
            width: 160px;
            height: 25px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        <span><b>阿里云盘</b></span>
        <div class="box1">
            <p>注册新账号</p>
            <input type="text"  placeholder="请输入账号">
            <input type="password" placeholder="请输入密码">
            <input type="password" placeholder="确认密码">
            <input type="button" value="注册" class="btn">
          
        </div>
    </div>
</body>
</html>
<script src="./04-ajax.js"></script>
<script>
let inputs=document.querySelectorAll('.box1 input')
function jump(){
    location.assign('file:///D:/wenjian/%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6git/pormise/%E4%BD%9C%E4%B8%9A.html')
}
inputs[3].onclick=function(){
    if( inputs[1].value != inputs[2].value ){
        for ( var i=1;i<inputs.length;i++   ){
            inputs[i].value=null
        }
        return  alert('请确认输入密码与确认密码是否一致？')
    if( inputs[0].value && inputs[1].value ){
                //if( /^1[3-9]\d{9}$/.test( inputs[0].value ) && /^\d{4}$/.test(inputs[1].value) ){
                if(/^\d{4}$/.test(inputs[1].value) ){
                    //通过校验, 发起登陆请求
                    ajax('get','https://yantianfeng.com/api/register',{ 
                        username:inputs[0].value,
                        password: inputs[1].value,
                    }).then((data)=>{
                        if( data.status == 200 ){
                            alert('注册成功'); 
                            jump()

                        }else{
                            alert('注册失败!');
                        } 
                        console.log(data);
                    })
                }else  {

                    alert('请输入正确的手机号/密码')
                }
            }else {
                alert('用户名/密码不能为空!')
            }
        }
            
        }



</script>